<template>
  <div class="map-container">
    <div :class="{ 'map-left' : true, 'active' : navActive == true }">
      <div class="map-nav">地图导航</div>
      <el-tree style="margin-top: 10px;" :data="treeData" show-checkbox node-key="id" :default-expanded-keys="[1,2]" :default-checked-keys="[5]" :props="defaultProps"></el-tree>
    </div>
    <div id="mapBox" class="map-right">
      <div class="map-mode">
        <div @click.stop="changeMapMode('sl')" class="map-mode-item sl">
          <div class="text">矢量</div>
        </div>
        <div @click.stop="changeMapMode('yx')" class="map-mode-item yx">
          <div class="text">影像</div>
        </div>
      </div>
      <div @click.stop="changeNavActive" :class="{ 'nav-switch' : true, 'active' : navActive == true }" :title="navActive == true ? '收缩地图导航' : '展开地图导航'">
        <i :class="navActive == true ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
      </div>
    </div>

    <el-tab-pane ref="test" v-model="activeName">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tab-pane>

  </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
var esri = require("esri-leaflet");

export default {
  name: "tdMap",
  components: {
    L
  },
  props: ["pkList"],
  data() {
    return {
      // 地图对象
      map: null,
      // 地图图层组
      mapLayerGroup: null,
      // 地图弹层
      mapPopup: null,
      // 地图配置
      mapBaseConfig: {
        center: { lon: 106.55, lat: 29.57 },
        zoom: 10,
        minZoom: 0,
        maxZoom: 17,
        zoomControl: true,
        crs: L.CRS.EPSG4326
      },
      // 地图图层
      mapLayers: {
        // 矢量
        cqVec: esri.tiledMapLayer({ url: "http://www.digitalcq.com/tianditu/hlvdl/765c64c33a9d4beeae5c5329da6caebf" }),
        // 影像
        cqImg: esri.tiledMapLayer({ url: "http://www.digitalcq.com/tianditu/kxrgo/ca295a0983c5473a825b1e4700adb81b" }),
        // 影像注记
        cqMark: esri.tiledMapLayer({ url: "http://www.digitalcq.com/tianditu/ewfwz/ff74349b1483497d913ec396ee35065b" })
      },

      // 地图导航配置
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 地图导航数据
      treeData: [
        {
          id: 1,
          label: "土地利用规划",
          children: [
            {
              id: 8,
              label: "总体规划"
            },
            {
              id: 9,
              label: "管理区规划"
            },
            {
              id: 10,
              label: "土地整治规划"
            }
          ]
        },
        {
          id: 2,
          label: "土地利用现状",
          children: [
            {
              id: 5,
              label: "2018年"
            },
            {
              id: 6,
              label: "2017年"
            }
          ]
        }
      ],

      // 页面参数
      navActive: true,
      polygonArr: [],
      polygonMap: {},
      activeName: "second"
    };
  },
  watch: {
    pkList() {
      // 监听片块列表变化
      this.renderGeoJson();
    }
  },
  methods: {
    initMap() {
      // 地图对象初始化
      this.map = L.map("mapBox", this.mapBaseConfig);
      // 默认添加[影像,标注]图层
      this.mapLayerGroup = L.layerGroup([this.mapLayers.cqImg, this.mapLayers.cqMark]);
      this.map.addLayer(this.mapLayerGroup);
      this.mapPopup = L.popup({ maxHeight: 400, minWidth: 350 });
      this.$nextTick(() => {
        this.map.invalidateSize(true);
      });
    },
    changeMapMode(mode) {
      // 切换地图模式
      this.mapLayerGroup.clearLayers(); // 清除所有图层
      switch (mode) {
        case "yx": // 影像
          this.mapLayerGroup = L.layerGroup([this.mapLayers.cqImg, this.mapLayers.cqMark]);
          this.map.addLayer(this.mapLayerGroup);
          break;
        case "sl": // 矢量
          this.mapLayerGroup = L.layerGroup([this.mapLayers.cqVec]);
          this.map.addLayer(this.mapLayerGroup);
          break;
        default:
          break;
      }
    },
    changeNavActive() {
      // 地图导航开关
      this.navActive = !this.navActive;
      this.$nextTick(() => {
        this.map.invalidateSize(true);
      });
    },
    renderGeoJson() {
      const that = this;
      if (this.pkList.length > 0) {
        this.pkList.forEach((item, index) => {
          if (item.feature != null) {
            let polygon = L.geoJSON(item.feature, {
              style: {
                color: "#ff0000",
                weight: 1,
                fillOpacity: 0.2
              }
            }).addTo(this.map);
            polygon.on("click", function(e) {
              console.log(e);
              // that.mapPopup
              //   .setLatLng(e.latlng)
              //   // .setContent(that.renderMapPopupContent())
              //   // .setContent(that.$refs.test)
              //   .openOn(that.map);

                console.log(that.$refs.test)
            });

            this.polygonArr.push(polygon.getBounds());
            this.polygonMap[item.id] = polygon;
            console.log(this.polygonMap)
          }
        });

        this.map.fitBounds(this.polygonArr); // 定位到图形位置
      }
    },
    changePkPosition(id) {
      this.restorePolygonStyle();
      if (id in this.polygonMap) {
        let currentPolygon = this.polygonMap[id];
        currentPolygon.setStyle({
          color: "#ff6600",
          weight: 1,
          fillOpacity: 0.2
        });
        this.map.fitBounds(currentPolygon.getBounds());
      } else {
        this.$message.error("没有片块数据！");
      }
    },
    restorePolygonStyle() {
      // 重置地图片块样式
      for (const key in this.polygonMap) {
        this.polygonMap[key].setStyle({
          color: "#ff0000",
          weight: 1,
          fillOpacity: 0.2
        });
      }
    },
    renderMapPopupContent() {
      let str = `<el-tab-pane v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tab-pane>`;
      return str;
    }
  },
  mounted() {
    this.initMap();
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  display: flex;
  justify-content: center;
  // margin-top: 30px;
  margin-bottom: 30px;
}
.map-left {
  width: 0;
  border: 1px solid #e9e9e9;
  border-right: none;

  &.active {
    width: 230px;
  }
}
.map-nav {
  background: #f2f2f2;
  height: 40px;
  border-bottom: 1px solid #e9e9e9;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #4d4d4d;
  line-height: 40px;
}
.map-right {
  position: relative;
  width: 100%;
  height: 600px;
}
.map-mode {
  display: flex;
  flex-direction: row;
  width: auto;
  height: 62px;
  overflow: hidden;
  font-size: 0;
  position: absolute;
  z-index: 1001;
  right: 0;
  bottom: 30px;

  &-item {
    position: relative;
    width: 62px;
    height: 62px;
    display: block;
    overflow: hidden;
    border: 1px solid #308be7;
    margin-right: 10px;
    cursor: pointer;

    .text {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 20px;
      display: block;
      overflow: hidden;
      font-size: 13px;
      color: #fff;
      text-align: center;
      line-height: 20px;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
    }
  }

  &-item.yx {
    background: url("../../assets/map/type-img-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  &-item.sl {
    background: url("../../assets/map/type-vector-icon.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.nav-switch {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #fff;
  width: 20px;
  height: 30px;
  border: 1px solid #ccc;
  border-left: 0 none;
  display: block;
  overflow: hidden;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  z-index: 1001;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
</style>
